<template>
  <div class="w-divider" :class="classes">
    <slot></slot>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-divider",

  props: {
    vertical: { type: Boolean },
    color: { type: String }
  },

  emits: [],
  setup(props, { slots }) {
    const classes = computed(() => {
      return {
        [`w-divider--has-color ${props.color}`]: props.color,
        "w-divider--vertical": props.vertical,
        "w-divider--has-content": slots.default
      };
    });

    return {
      classes
    };
  }
};
</script>
